<template>
    <div class="app-container">
        <levelbar></levelbar>
        <TableLayoutes form-title="">
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-popover placement="bottom-start" trigger="hover" content="提示：每天可以添加一次评分">
                        <el-button slot="reference" @click="addRate">新增评分</el-button>
                    </el-popover>
                </div>
            </div>
            <el-table :data="queryData" style="width: 100%" border  v-loading="loading" @selection-change="handleSelectionChange" ref="multipleTable">
                <el-table-column label="评分日期" align="center" min-width="120">
                     <template scope="scope">
                        {{scope.row.ratingTime.substring(0, 10)}}
                    </template>
                </el-table-column>
                <el-table-column label="评分项" align="center" min-width="200">
                    <template scope="scope">
                        {{scope.row.ratingName||'--'}}
                    </template>
                </el-table-column>
                <el-table-column label="总分" align="center">
                      <template scope="scope">
                        {{scope.row.score||'--'}}
                    </template>
                </el-table-column>
                <el-table-column label="已评分班级" align="center" min-width="100">
                     <template scope="scope">
                        {{scope.row.classNum||'--'}}
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" min-width="190">
                    <template scope="scope">
                         {{scope.row.createTime.substring(0, 19)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="left" width="170">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="edit(scope.row)">编辑</el-button>
                        <el-button type="text" class="btn-success" @click="check(scope.row)">查看</el-button>
                        <el-button type="text" class="btn-success" @click="deleteRow(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayoutes>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import TableLayoutes from 'components/TableLayoutes';
import moment from 'moment';
import addCountdown from './comps/addCountdown';
import { mapGetters, mapState, mapActions } from 'vuex';
import { pageClassScore, deleteClassScore } from 'api/wisdom';


export default {
    name: 'classScore',
    components: { Levelbar, TableLayoutes, addCountdown },
    data() {
        return {
            loading: false,
            gradeList: [],
            classList: [],
            query: {
                grade: '',
                classId: '',
                stuName: '',
                talkType: ''
            },
            queryData: [],
            multipleSelection: [], // 勾选的表格的项目
            listQuery: {// 分页
                page: 1,
                total: 0
            }
        }
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            val && this.getClassDeclaration();
        }
    },
    created() {
        this.getClassDeclaration();
    },
    filters: {
        stateFilter(val) {
            if (val) {
                return val.replace(/\;/g, '</br>');
            } else {
                return '--'
            }
        }
    },
    computed: {
        ...mapGetters([
            'uid',
            'schoolId',
            'schoolName',
            'schoolType',
            'roleType'
        ]),
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated // 局部刷新列表
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']),

        getClassDeclaration() {
            let json={
                schoolId: this.schoolId,
                page: this.listQuery.page,
                rows: this.config.pageSize
            }
            pageClassScore(json).then(res => {
                this.loading = false;
                this.queryData = res.data.content.list;
                this.listQuery.total = res.data.content.pagination.total
            }).catch(() => {
                this.loading = false;
            });
        },
        addRate() {// 每天可以新增一次评分
            let timeArr=[];
            this.queryData.forEach((item) => {
                // timeArr.push(item.createTime.substring(0, 10))
                timeArr.push(item.ratingTime.substring(0, 10))
            })
            let now=moment(new Date()).format('YYYY-MM-DD')
            if (timeArr.includes(now)) {
                this.$message.info('每天可以新增一次评分')
                return
            }
            this.$router.push({ path: '/classScore/addRate'});
        },
        edit(row) {
            this.$router.push({ path: `/classScore/rateSet/${row.ratingTime}`});
        },
        check(row) {
            this.$router.push({ path: `/classScore/rateCheck/${row.ratingTime}`});
        },
        deleteRow(rows) {
            this.$confirm('是否确认删除', ' ', {
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                let json={
                    schoolId: this.schoolId,
                    ratingTimeList: [] // 评分时间
                }
                json.ratingTimeList.push(rows.ratingTime.substring(0, 19))
                deleteClassScore(json).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })   
                    this.getClassDeclaration();     
                    
                })
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.getClassDeclaration();
        },
        handleCurrentChange(val) {            
            this.listQuery.page = val;
            this.getClassDeclaration();
        }
    }
}
</script>

<style lang="scss" scoped>
.app-container {
    position: relative;
    padding: 20px 20px 10px;
}
</style>